<template>
  <list-frame :show-advance-query="false" :total="query.total" :table-data="dictList" :columns="columns"
    @page-changed="pageChanged" @size-changed="sizeChanged" @query="onQuery">
    <template #base>
      <el-select @change="onQuery" v-model="query.dictType" placeholder="选择字典类别" style="width: 180px;margin-left: 4px;"
        clearable>
        <el-option v-for="item in dictTypeList" :key="item.type" :label="item.name" :value="item.type"></el-option>
      </el-select>
    </template>
    <template #append>
      <el-button type="primary" color="#626aef" @click="onCreate">添加字典</el-button>
      <create-view :data="currentDict" :visible="popupVisible" :dict-type="query.dictType"
        @close="onClose"></create-view>
    </template>
    <template #operations="row">
      <el-button v-if="!checkIsDefaultDict(row)" link type="primary" size="default"
        @click="onUpdate(row)">编辑</el-button>
      <el-button v-if="!checkIsDefaultDict(row)" link type="danger" size="default" @click="onDelete(row)">删除</el-button>
      <span style="color:red;" v-if="checkIsDefaultDict(row)">系统内置字典</span>
    </template>
  </list-frame>
</template>
<script lang="ts" setup>
import type { ColumnType } from '@/components/types';
import ListFrame from '@/components/ListFrame/ListFrame.vue';
import ApiTree from '@/server/api-tree';
import { ref } from 'vue';
import ElConfirm from '@/components/ElConfirm';
import { DictTypeList, type QueryDictVO, type DictVO } from '@/server/dict/types';
import { ElMessage } from 'element-plus';
import CreateView from './CreateView.vue';
/** 表格属性 */
const columns = ref<ColumnType[]>([
  { prop: "code", colName: "字典编码", width: 120 },
  { prop: "name", colName: "字典名称", width: 0 },
  { prop: "orderBy", colName: "排序", width: 80 },
  { prop: "cuser", colName: "创建人", width: 120 },
  { prop: "ctime", colName: "创建时间", width: 180 },
]);
const checkIsDefaultDict = (row: { value: DictVO }) => {
  const data = row.value;
  if (row.value.dictType === 'REPAIR_STATE') {
    return true;
  }
  if (row.value.dictType === "ROLE" && ['ADMIN', 'USER'].includes(data.code)) {
    return true;
  }
  if (row.value.code === "DEMO") {
    return true;
  }
  return false;
}
/** 查询列表 */
const query = ref<QueryDictVO>({
  dictType: "",
  pageNo: 1,
  pageSize: 30,
  total: 0
})
const dictList = ref<DictVO[]>([])
const getDictList = async () => {
  const { data, totalCount } = await ApiTree.dict.page(query.value);
  if (data) {
    dictList.value = data;
    query.value.total = totalCount;
  }
}
const pageChanged = (pageNo: number) => {
  query.value.pageNo = pageNo;
  getDictList();
}
const sizeChanged = (pageSize: number) => {
  query.value.pageSize = pageSize;
  getDictList();
}
const onQuery = () => {
  query.value.pageNo = 1;
  getDictList();
}
/** 获取字典类别列表 */
const dictTypeList = ref(DictTypeList)

/** 添加/修改字典 */
const popupVisible = ref(false)
const currentDict = ref<DictVO | null>(null);
const onCreate = () => {
  if (query.value.dictType === "REPAIR_STATE") {
    ElMessage.error("维修状态与数据有联动，不能自行添加！");
    return;
  }
  currentDict.value = null;
  popupVisible.value = true;
}
const onUpdate = (row: { value: DictVO }) => {
  const data = row.value;
  if (checkIsDefaultDict(row)) {
    ElMessage.error("该字典是系统内置，不能修改！");
    return;
  }
  currentDict.value = data;
  popupVisible.value = true;
}
const onClose = () => {
  getDictList();
  popupVisible.value = false;
}
/** 删除字典信息 */
const onDelete = (row: { value: DictVO }) => {
  const data = row.value;
  if (checkIsDefaultDict(row)) {
    ElMessage.error("该字典是系统内置，不能修改！");
    return;
  }
  ElConfirm(`确定要删除字典【${data.name}】吗？`).then(async () => {
    const { success, msg } = await ApiTree.dict.delete(data);
    if (success) { ElMessage.success(msg) }
    getDictList();
  }).catch();
}
</script>
<style lang="scss" scope></style>
